<html>
<head>
<base target="_blank">
<title>TEST svg animation</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg" style="fill:purple;stroke:red" id="svg">
    <g transform="translate(0.005) scale(0.022)">
        <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
    </g>
	</svg>

<script>

dw = 100
setInterval(function(){
  // this function executes every 3000ms,
  dw = dw - 10
  if (dw < 10) dw = 100
  $("#svg").animate({
			  width: dw+"%", height: dw+"%"
			}, 400)	
}, 3000);


</script>


</body>
</html>

